<template>
  <div class="account-container">
    <el-row :gutter="20">
      <!-- 账户信息卡片 -->
      <el-col :span="8">
        <el-card class="account-card" shadow="hover">
          <div class="account-header">
            <div class="balance-section">
              <div class="balance-label">账户余额</div>
              <div class="balance-amount">¥ {{ formatNumber(accountInfo?.currentBalance || 0) }}</div>
            </div>
            <el-button type="primary" @click="showEditDialog" text>
              <el-icon><Edit /></el-icon>
            </el-button>
          </div>
          <div class="account-body" v-if="accountInfo">
            <div class="info-row">
              <el-icon><CreditCard /></el-icon>
              <span class="label">开户行：</span>
              <span class="value">{{ accountInfo.bankName || '未绑定' }}</span>
            </div>
            <div class="info-row">
              <el-icon><Document /></el-icon>
              <span class="label">银行卡号：</span>
              <span class="value">{{ formatBankCard(accountInfo.bankCardNumber) || '未绑定' }}</span>
            </div>
            <div class="info-row">
              <el-icon><Money /></el-icon>
              <span class="label">当前余额：</span>
              <span class="value income">¥ {{ formatNumber(accountInfo.currentBalance || 0) }}</span>
            </div>
          </div>
          <div class="account-footer">
            <el-button type="primary" @click="showEditDialog" :disabled="!accountInfo">
              <el-icon><Edit /></el-icon>
              {{ accountInfo?.bankCardNumber ? '修改银行卡' : '绑定银行卡' }}
            </el-button>
            <el-button type="success" @click="showWithdrawDialog" :disabled="!canWithdraw">
              <el-icon><Money /></el-icon>
              申请提现
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 收入统计卡片 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <!-- 收入概览卡片 -->
          <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>收入概览</span>
                  <el-button-group>
                    <el-button type="primary" @click="refreshBillInfo" :loading="loading">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="income-stat-card">
                    <div class="stat-title">今日收入</div>
                    <div class="stat-amount">¥ {{ formatNumber(todayIncome) }}</div>
                    <div class="stat-compare" :class="todayCompare >= 0 ? 'up' : 'down'">
                      <el-icon><component :is="todayCompare >= 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                      {{ Math.abs(todayCompare) }}% 较昨日
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="income-stat-card">
                    <div class="stat-title">本月收入</div>
                    <div class="stat-amount">¥ {{ formatNumber(monthIncome) }}</div>
                    <div class="stat-compare" :class="monthCompare >= 0 ? 'up' : 'down'">
                      <el-icon><component :is="monthCompare >= 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                      {{ Math.abs(monthCompare) }}% 较上月
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="income-stat-card">
                    <div class="stat-title">总收入</div>
                    <div class="stat-amount">¥ {{ formatNumber(totalIncome) }}</div>
                    <div class="stat-period">{{ incomeStartDate }} 至今</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>

          <!-- 收入趋势图 -->
          <el-col :span="24" style="margin-top: 20px;">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>收入趋势</span>
                  <el-radio-group v-model="chartPeriod" size="small">
                    <el-radio-button label="week">近7天</el-radio-button>
                    <el-radio-button label="month">近30天</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="chart-container">
                <div ref="incomeChart" style="width: 100%; height: 300px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <!-- 账单记录卡片 -->
      <el-col :span="24" style="margin-top: 20px;">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <span class="title">账单明细</span>
                <el-tag type="info" effect="plain" class="count-tag">
                  共 {{ filteredBillList.length }} 条记录
                </el-tag>
              </div>
              <div class="header-actions">
                <el-select v-model="billType" placeholder="交易类型" style="width: 120px" clearable>
                  <el-option label="全部" :value="null" />
                  <el-option label="收入" :value="1" />
                  <el-option label="支出" :value="2" />
                </el-select>
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :shortcuts="dateShortcuts"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                />
              </div>
            </div>
          </template>
          <el-table 
            :data="paginatedBillList" 
            style="width: 100%" 
            v-loading="loading"
            stripe
            border
          >
            <el-table-column label="序号" type="index" width="70" align="center" />
            <el-table-column prop="transactionTime" label="交易时间" width="160" sortable>
              <template #default="scope">
                {{ formatDate(scope.row.transactionTime, 'YYYY-MM-DD HH:mm') }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="交易类型" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.type === 1 ? 'success' : 'danger'" effect="plain">
                  {{ scope.row.type === 1 ? '收入' : '支出' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="交易金额" width="120" align="right">
              <template #default="scope">
                <span :class="scope.row.type === 1 ? 'income' : 'expense'">
                  {{ scope.row.type === 1 ? '+' : '-' }}{{ formatNumber(scope.row.amount) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="交易说明" min-width="150">
              <template #default="scope">
                {{ scope.row.description }}
              </template>
            </el-table-column>
            <el-table-column prop="id" label="交易流水号" width="200" show-overflow-tooltip>
              <template #default="scope">
                <span class="bill-id">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :layout="'total, sizes, prev, pager, next'"
              :total="filteredBillList.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑银行卡信息对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="accountInfo?.bankCardNumber ? '修改银行卡' : '绑定银行卡'"
      width="500px"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="开户行" prop="bankName">
          <el-input 
            v-model="editForm.bankName"
            placeholder="请输入开户行名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankCardNumber">
          <el-input 
            v-model="editForm.bankCardNumber"
            placeholder="请输入银行卡号"
            maxlength="19"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate" :loading="updating">
            确认{{ accountInfo?.bankCardNumber ? '修改' : '绑定' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 提现对话框 -->
    <el-dialog
      v-model="withdrawDialogVisible"
      title="申请提现"
      width="500px"
    >
      <el-form
        ref="withdrawFormRef"
        :model="withdrawForm"
        :rules="withdrawRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="银行卡号">
          <div class="info-text">{{ formatBankCard(accountInfo?.bankCardNumber) }}</div>
        </el-form-item>
        <el-form-item label="开户行">
          <div class="info-text">{{ accountInfo?.bankName }}</div>
        </el-form-item>
        <el-form-item label="可提现金额">
          <div class="info-text income">¥ {{ formatNumber(accountInfo?.currentBalance || 0) }}</div>
        </el-form-item>
        <el-form-item label="提现金额" prop="amount">
          <el-input-number
            v-model="withdrawForm.amount"
            :min="0.01"
            :max="accountInfo?.currentBalance || 0"
            :precision="2"
            :step="100"
            style="width: 220px;"
          />
        </el-form-item>
        <div class="withdraw-tips">
          <p>提示：</p>
          <p>1. 提现金额不能超过可提现金额</p>
          <p>2. 提现将转入以上绑定的银行卡账户</p>
          <p>3. 到账时间以银行实际处理时间为准</p>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="withdrawDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleWithdraw" :loading="withdrawing">
            确认提现
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import { getAccountInfo, updateAccountInfo, withdraw, getBillInfo } from '@/api/user'
import { ElMessage } from 'element-plus'
import { 
  Refresh, Edit, User, Phone, CreditCard, Document, Money,
  ArrowUp, ArrowDown 
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 数据定义
const accountInfo = ref(null)
const billList = ref([])
const editDialogVisible = ref(false)
const withdrawDialogVisible = ref(false)
const loading = ref(false)
const chartPeriod = ref('week')
const dateRange = ref([])
const incomeChart = ref(null)
const billType = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)
const editFormRef = ref(null)
const withdrawFormRef = ref(null)
const updating = ref(false)
const withdrawing = ref(false)

// 计算属性
const canWithdraw = computed(() => {
  return accountInfo.value?.currentBalance > 0 && accountInfo.value?.bankCardNumber
})

const filteredBillList = computed(() => {
  let result = billList.value || []

  // 按类型筛选
  if (billType.value !== null) {
    result = result.filter(bill => bill.type === billType.value)
  }

  // 按日期筛选
  if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
    const start = dayjs(dateRange.value[0]).startOf('day')
    const end = dayjs(dateRange.value[1]).endOf('day')
    result = result.filter(bill => {
      const billDate = dayjs(bill.transactionTime)
      return billDate.isAfter(start) && billDate.isBefore(end)
    })
  }

  // 按时间倒序排序
  return result.sort((a, b) => 
    dayjs(b.transactionTime).valueOf() - dayjs(a.transactionTime).valueOf()
  )
})

// 收入统计
const todayIncome = computed(() => {
  const today = dayjs().startOf('day')
  return billList.value
    .filter(bill => bill.type === 1 && dayjs(bill.transactionTime).isAfter(today))
    .reduce((sum, bill) => sum + bill.amount, 0)
})

const monthIncome = computed(() => {
  const monthStart = dayjs().startOf('month')
  return billList.value
    .filter(bill => bill.type === 1 && dayjs(bill.transactionTime).isAfter(monthStart))
    .reduce((sum, bill) => sum + bill.amount, 0)
})

const totalIncome = computed(() => {
  return filteredBillList.value
    .filter(bill => bill.type === 1)
    .reduce((sum, bill) => sum + bill.amount, 0)
})

const totalExpense = computed(() => {
  return filteredBillList.value
    .filter(bill => bill.type === 2)
    .reduce((sum, bill) => sum + bill.amount, 0)
})

const totalBalance = computed(() => {
  return totalIncome.value - totalExpense.value
})

const incomeStartDate = computed(() => {
  if (billList.value.length === 0) return '--'
  const firstBill = [...billList.value]
    .sort((a, b) => dayjs(a.transactionTime).valueOf() - dayjs(b.transactionTime).valueOf())[0]
  return dayjs(firstBill.transactionTime).format('YYYY-MM-DD')
})

// 同比计算
const todayCompare = computed(() => {
  const today = dayjs().startOf('day')
  const yesterday = today.subtract(1, 'day')
  
  const yesterdayIncome = billList.value
    .filter(bill => bill.type === 1 && 
      dayjs(bill.transactionTime).isAfter(yesterday) && 
      dayjs(bill.transactionTime).isBefore(today))
    .reduce((sum, bill) => sum + bill.amount, 0)
    
  if (yesterdayIncome === 0) return 0
  return Math.round((todayIncome.value - yesterdayIncome) / yesterdayIncome * 100)
})

const monthCompare = computed(() => {
  const thisMonth = dayjs().startOf('month')
  const lastMonth = thisMonth.subtract(1, 'month')
  
  const lastMonthIncome = billList.value
    .filter(bill => bill.type === 1 && 
      dayjs(bill.transactionTime).isAfter(lastMonth) && 
      dayjs(bill.transactionTime).isBefore(thisMonth))
    .reduce((sum, bill) => sum + bill.amount, 0)
    
  if (lastMonthIncome === 0) return 0
  return Math.round((monthIncome.value - lastMonthIncome) / lastMonthIncome * 100)
})

// 表单数据
const editForm = ref({
  bankCardNumber: '',
  bankName: ''
})

const withdrawForm = ref({
  amount: 0.01
})

// 表单校验规则
const editRules = {
  bankCardNumber: [
    { required: true, message: '请输入银行卡号', trigger: 'blur' },
    { pattern: /^\d{16,19}$/, message: '请输入16-19位银行卡号', trigger: 'blur' }
  ],
  bankName: [
    { required: true, message: '请输入开户行名称', trigger: 'blur' }
  ]
}

const withdrawRules = {
  amount: [
    { required: true, message: '请输入提现金额', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (!value || value <= 0) {
          callback(new Error('提现金额必须大于0'))
        } else if (!accountInfo.value?.currentBalance) {
          callback(new Error('账户余额获取失败'))
        } else if (value > accountInfo.value.currentBalance) {
          callback(new Error('提现金额不能超过可提现金额'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 工具函数
const formatNumber = (num) => {
  return Number(num).toLocaleString('zh-CN', { 
    minimumFractionDigits: 2, 
    maximumFractionDigits: 2 
  })
}

const formatDate = (date, format) => {
  return dayjs(date).format(format)
}

const formatBankCard = (card) => {
  if (!card) return ''
  return card.replace(/(\d{4})(?=\d)/g, '$1 ')
}

// 获取账户信息
const fetchAccountInfo = async () => {
  try {
    const res = await getAccountInfo()
    if (res.code === 1) {
      accountInfo.value = res.data
      editForm.value = {
        bankCardNumber: res.data.bankCardNumber,
        bankName: res.data.bankName
      }
    } else {
      ElMessage.error(res.msg || '获取账户信息失败')
    }
  } catch (error) {
    console.error('获取账户信息失败：', error)
    ElMessage.error('获取账户信息失败')
  }
}

// 获取账单信息
const refreshBillInfo = async () => {
  loading.value = true
  try {
    const res = await getBillInfo()
    if (res.code === 1) {
      billList.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取账单信息失败')
    }
  } catch (error) {
    console.error('获取账单信息失败：', error)
    ElMessage.error('获取账单信息失败')
  } finally {
    loading.value = false
  }
}

// 图表相关
const initChart = () => {
  if (!incomeChart.value) return
  const chart = echarts.init(incomeChart.value)
  window.addEventListener('resize', () => chart.resize())
  return chart
}

const updateChart = () => {
  const chart = initChart()
  if (!chart) return

  const days = chartPeriod.value === 'week' ? 7 : 30
  const dates = Array.from({ length: days }, (_, i) => {
    return dayjs().subtract(days - 1 - i, 'day').format('MM-DD')
  })

  const incomeData = dates.map(date => {
    return billList.value
      .filter(bill => 
        bill.type === 1 && 
        dayjs(bill.transactionTime).format('MM-DD') === date
      )
      .reduce((sum, bill) => sum + bill.amount, 0)
  })

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const income = params[0].value
        return `${params[0].name}<br/>收入：¥${formatNumber(income)}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '金额 (元)',
      axisLabel: {
        formatter: value => `¥${formatNumber(value)}`
      }
    },
    series: [{
      data: incomeData,
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#67C23A'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(103,194,58,0.3)'
        }, {
          offset: 1,
          color: 'rgba(103,194,58,0.1)'
        }])
      }
    }]
  }

  chart.setOption(option)
}

// 事件处理
const handleDateRangeChange = () => {
  // 日期范围改变时的处理逻辑
}

const showEditDialog = () => {
  editForm.value = {
    bankCardNumber: accountInfo.value?.bankCardNumber || '',
    bankName: accountInfo.value?.bankName || ''
  }
  editDialogVisible.value = true
}

const showWithdrawDialog = () => {
  if (!accountInfo.value?.bankCardNumber) {
    ElMessage.warning('请先绑定银行卡')
    return
  }
  if (!accountInfo.value?.currentBalance || accountInfo.value.currentBalance <= 0) {
    ElMessage.warning('当前账户余额不足')
    return
  }
  withdrawForm.value.amount = 100
  withdrawDialogVisible.value = true
}

const handleUpdate = async () => {
  if (!editFormRef.value) return
  
  await editFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    updating.value = true
    try {
      const res = await updateAccountInfo({
        ...editForm.value,
        id: accountInfo.value?.id
      })
      
      if (res.code === 1) {
        ElMessage.success(accountInfo.value?.bankCardNumber ? '银行卡修改成功' : '银行卡绑定成功')
        editDialogVisible.value = false
        fetchAccountInfo()
      } else {
        ElMessage.error(res.msg || '操作失败')
      }
    } catch (error) {
      console.error('更新银行卡信息失败：', error)
      ElMessage.error('操作失败，请重试')
    } finally {
      updating.value = false
    }
  })
}

const handleWithdraw = async () => {
  if (!withdrawFormRef.value) return
  
  await withdrawFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    withdrawing.value = true
    try {
      const res = await withdraw(withdrawForm.value.amount)
      
      if (res.code === 1) {
        ElMessage.success('提现申请提交成功')
        withdrawDialogVisible.value = false
        // 刷新账户信息和账单列表
        await Promise.all([
          fetchAccountInfo(),
          refreshBillInfo()
        ])
      } else {
        ElMessage.error(res.msg || '提现失败')
      }
    } catch (error) {
      console.error('提现失败：', error)
      ElMessage.error('提现失败，请重试')
    } finally {
      withdrawing.value = false
    }
  })
}

// 监听图表周期变化
watch(chartPeriod, () => {
  updateChart()
})

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchAccountInfo(),
    refreshBillInfo()
  ])
  nextTick(() => {
    updateChart()
  })
})

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 分页后的数据
const paginatedBillList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredBillList.value.slice(start, end)
})

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.account-container {
  padding: 20px;
}

.account-card {
  height: 100%;
}

.account-header {
  padding: 20px;
  background: linear-gradient(135deg, #1989fa 0%, #5cadff 100%);
  border-radius: 8px;
  color: white;
  margin: -20px -20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.balance-section {
  flex: 1;
}

.balance-label {
  font-size: 14px;
  opacity: 0.8;
}

.balance-amount {
  font-size: 32px;
  font-weight: bold;
  margin-top: 5px;
}

.account-body {
  padding: 0 20px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.info-row .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #909399;
}

.info-row .label {
  color: #909399;
  margin-right: 8px;
}

.info-row .value {
  color: #303133;
  flex: 1;
}

.account-footer {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

.income-stat-card {
  padding: 20px;
  text-align: center;
  border-right: 1px solid #ebeef5;
}

.income-stat-card:last-child {
  border-right: none;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-amount {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 10px 0;
}

.stat-compare {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-compare.up {
  color: #67C23A;
}

.stat-compare.down {
  color: #F56C6C;
}

.stat-period {
  font-size: 12px;
  color: #909399;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.income {
  color: #67C23A;
  font-weight: bold;
}

.expense {
  color: #F56C6C;
  font-weight: bold;
}

.withdraw-tips {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
  color: #909399;
}

.withdraw-tips p {
  margin: 5px 0;
  line-height: 1.5;
}

.chart-container {
  padding: 20px 0;
}

:deep(.el-card__header) {
  padding: 15px 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.count-tag {
  font-size: 12px;
}

.bill-id {
  color: #909399;
  font-family: monospace;
  font-size: 13px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row) {
  cursor: default;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}

.info-text {
  font-size: 16px;
  color: #303133;
  line-height: 32px;
}

.info-text.income {
  color: #67C23A;
  font-weight: bold;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-input-number) {
  width: 100%;
}
</style> 